<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-计算属性和监听器</title>
</head>
<body>

<div id="app">
    <!--
     split('')   ['h','e','l','l','o']
     reverse()   ['o','l','l','e','h']
     join('')     'olleh'
    -->
    {{ message.split('').reverse().join('') }}

    {{reverseMessage(message)}} <!--表意清晰，但是效果不高-->

    <!--     方法reverseMessage被调用了 {{count}}次-->

    <!--    {{reversed}}
        计算属性reversed被调用了 {{count}}次-->

    {{fullName}}
    <div>
        firstName:<input v-model="firstName"/>
    </div>
    <div>
        lastName:<input v-model="lastName"/>
    </div>

</div>

</body>
<script src="../../lib/vue.js"></script>
<script>

    new Vue({
        el: '#app',
        data: {
            message: 'world',
            count: 0,
            firstName: 'Mart',
            lastName: 'Green'
        }, methods: {
            reverseMessage(str) {
                //this.count+=1;
                return str.split('').reverse().join('')
            }
        }, computed: {
            reversed() {
                this.count += 1;
                return this.message.split('').reverse().join('')
            },
            fullName() {
                return this.firstName + "."
               + this.lastName;
            }
        }
    })
</script>
</html>